<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/bootstrap.bundle.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <!--我们一般先写HTML元素,再写CSS样式-->
        <style type="text/css">
            /*指定页面背景为一张图片*/
           body{
               background-image: url("img/snow.jpg");
           }
            /*控制表单*/
           .form{
              width:550px;
              height: 300px;
              border: 1px solid black;
              background-color: white;
              margin:100px auto;/*让表单距离浏览器上边界100px,左右自动调整(居中)*/
           }
            /*控制用户注册文本*/
            .text{
               font-size:30px;/*控制字体大小*/
               text-align:center;/*文本对齐方式*/
               margin-bottom: 30px;/*控制用户注册下边框与其它边框距离*/
            }
        </style>
    </head>
    <body>
        <!--通过action指定表单的提交服务器地址-->
        <form class="form" action="/day05-servlet-login/login" method="post">
            <div class="text">用户登录</div>
            <div class="form-group row">
                <label for="uname" class="col-sm-2 offset-sm-2 col-form-label">用户名</label>
                <div class="col-sm-6">
                  <input name="username" type="text" class="form-control" id="uname" placeholder="请输入用户名" required>
                </div>
            </div>

            <div class="form-group row">
                <label for="password" class="col-sm-2 offset-sm-2 col-form-label">密码</label>
                <div class="col-sm-6">
                    <input name="password" type="password" class="form-control" id="password" placeholder="请输入密码" required>
                </div>
            </div>

            <div class="form-group row">
                <div class="col-auto my-1 offset-2">
                    <div class="custom-control custom-checkbox mr-sm-2">
                        <input name="autoLogin" type="checkbox" class="custom-control-input" id="customControlAutosizing">
                        <label class="custom-control-label" for="customControlAutosizing">记住我</label>
                    </div>
                </div>
            </div>

            <div class="col-sm-4 offset-sm-4">
               <button type="submit" class="btn btn-primary">登录</button>
            </div>
        </form>
    </body>
</html>